<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>邮件编辑器 - 订阅服务</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="icon" type="image/ico" href="/pc/inbox_icon.png">
  <style>
    :root {
      --primary-blue: #2196F3;
      --secondary-blue: #42A5F5;
      --dark-blue: #1976D2;
      --background-blue: #E3F2FD;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      background-color: var(--background-blue);
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }

    /* 原价格页面样式 */
    .pricing-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .pricing-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    .pricing-card {
      background: white;
      border-radius: 10px;
      padding: 2rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border: 2px solid var(--primary-blue);
    }

    .popular-plan {
      transform: scale(1.05);
      border-color: var(--dark-blue);
    }

    .price {
      font-size: 2.5rem;
      color: var(--dark-blue);
      margin: 1rem 0;
    }

    .features-list {
      list-style: none;
      padding: 0;
    }

    .features-list li {
      margin: 0.8rem 0;
      display: flex;
      align-items: center;
    }

    .features-list i {
      color: var(--primary-blue);
      margin-right: 0.5rem;
    }

    /* 原支付页面样式（已隐藏） */
    .payment-container {
      display: none; /* 根据要求隐藏支付信息 */
      max-width: 800px;
      margin: 2rem auto;
      background: white;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* 新增动态样式 */
    .pricing-card {
      transition: all 0.3s ease; /* 新增 */
      cursor: pointer; /* 新增 */
    }

    .pricing-card:hover {
      transform: translateY(-10px); /* 新增动态效果 */
      box-shadow: 0 8px 15px rgba(33, 150, 243, 0.3); /* 新增 */
    }

    @keyframes cardEntrance {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pricing-cards {
      animation: cardEntrance 0.8s ease-out; /* 新增入场动画 */
    }

    .price::after {
      position: absolute;
      top: -15px;
      right: -40px;
      background: #ff4757;
      color: white;
      padding: 3px 8px;
      border-radius: 3px;
      font-size: 0.8rem;
      animation: badgePulse 1.5s infinite; /* 新增 */
    }

    button {
      position: relative; /* 新增按钮光效 */
      overflow: hidden; /* 新增 */
    }

    /* 保留原有按钮样式 */
    button {
      background: linear-gradient(to right, var(--primary-blue), var(--dark-blue));
      color: white;
      padding: 1rem 2rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1.1rem;
      transition: opacity 0.3s;
    }

    /* 新增加载动画 */
    .loading {
      display: none;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 1s ease-in-out infinite;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="pricing-header">
    <h1>选择适合您的计划</h1>
    <p>立即升级，体验专业邮件编辑功能</p>
  </div>

  <div class="pricing-cards">
    <div class="pricing-card">
      <h2>基础版</h2>
      <div class="price">￥15/月</div>
      <ul class="features-list">
        <li><i class="fas fa-check"></i>基础模板库</li>
        <li><i class="fas fa-check"></i>每天20次</li>
        <li><i class="fas fa-check"></i>基础导出保存</li>
      </ul>
      <button onclick="handleSubscription('basic')">
        <span class="btn-text">立即开始</span>
        <div class="loading"></div>
      </button>
    </div>

    <div class="pricing-card popular-plan">
      <h2>专业版</h2>
      <div class="price">￥20/月</div>
      <ul class="features-list">
        <li><i class="fas fa-check"></i>基础模板库</li>
        <li><i class="fas fa-check"></i>每天20次</li>
        <li><i class="fas fa-check"></i>基础导出保存</li>
        <li><i class="fas fa-check"></i>样式ai助手</li>
      </ul>
      <button onclick="handleSubscription('pro')">
        <span class="btn-text">最受欢迎</span>
        <div class="loading"></div>
      </button>
    </div>

    <div class="pricing-card">
      <h2>最终版</h2>
      <div class="price">￥30/月</div>
      <ul class="features-list">
        <li><i class="fas fa-check"></i>高级模板库</li>
        <li><i class="fas fa-check"></i>自定义在线编辑模板</li>
        <li><i class="fas fa-check"></i>每天不限次数</li>
        <li><i class="fas fa-check"></i>基础导出保存</li>
        <li><i class="fas fa-check"></i>样式ai助手</li>
      </ul>
      <button onclick="handleSubscription('enterprise')">
        <span class="btn-text">联系我们</span>
        <div class="loading"></div>
      </button>
    </div>
  </div>
</div>

<script>
  function handleSubscription(plan) {
    const buttons = document.querySelectorAll('button');
    buttons.forEach(btn => {
      btn.disabled = true;
      const loading = btn.querySelector('.loading');
      const btnText = btn.querySelector('.btn-text');
      if (btn.onclick.toString().includes(plan)) {
        btnText.style.display = 'none';
        loading.style.display = 'inline-block';
        btn.style.background = 'linear-gradient(to right, #1976D2, #0D47A1)';
      }
    });

    // 模拟异步操作
    setTimeout(() => {
      buttons.forEach(btn => {
        btn.disabled = false;
        const loading = btn.querySelector('.loading');
        const btnText = btn.querySelector('.btn-text');
        loading.style.display = 'none';
        btnText.style.display = 'inline';
        btn.style.background = 'linear-gradient(to right, #2196F3, #1976D2)';
      });
      alert(`已选择 ${plan} 套餐！`);
    }, 1500);
  }
</script>
</body>
</html>